<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1,IE=9">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="LEUR DE CHINE">
    <meta name="keywords"
          content="china reds,china blues,cashmere,corduroy,little bag,tartans,tweeds,stars,stripes,linen,leather,tassel travel bag,tartan,accessories">
    <title>上药神象农业物联网监控系统</title>
    <!--[if lte IE 8]>
    <script>window.location.href = 'http://cdn.dmeng.net/upgrade-your-browser.html?referrer=' + location.href;</script>
    <![endif]-->
    <script type="text/javascript" src="${basePath}/pc/lib/respond/respond.src.js"></script>
    <link href="${basePath}/pc/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/pc/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/pc/lib/iconfont/css/iconfont.css" rel="stylesheet">
    <link href="${basePath}/pc/css/main.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="${basePath}/pc/lib/bootstrap/js/html5shiv.min.js"></script>
    <script src="${basePath}/pc/lib/bootstrap/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>


<div class="wrp">
    <nav class="navbar navbar-inverse cm_nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="${basePath}/pc/user/main">
                    <img src="${basePath}/pc/img/logo_white.png" class="img-responsive">
                </a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav mnav">
                    <li class="active">
                        <a href="${basePath}/pc/user/main">监控数据</a>
                    </li>
                    <li>
                        <a href="${basePath}/function/pc/farmwork">农事记录</a>
                    </li>
                </ul>
                <ul class="navbar-nav navbar-right smenu">
                    <li class="wl_fnt">
                        <a><i class="iconfont icon-account"></i>欢迎：<span class="username"></span></a>
                    </li>
                    <li class="ext_lnk">
                        <a href="${basePath}/logout"><i class="iconfont icon-exit1"></i>退出</a>
                    </li>
                </ul>

            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>

    <div class="pgc">
        <div class="container">
            <div class="cls">
                <div class="tbar mtbar">
                    <a href="javascript:history.go(-1);" class="bk_lnk"><i class="iconfont icon-left"></i></a>
                    <div class="dropdown slt_eqm">
                        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#"
                           href="javascript:;">
                            --- 请选择设备 --- <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                            <li class="dropdown-submenu" data-stopPropagation="true">
                                <a tabindex="-1" href="javascript:;">传感器组</a>
                                <ul class="dropdown-menu sensorGroup"></ul>
                            </li>
                            <li class="dropdown-submenu" data-stopPropagation="true">
                                <a tabindex="-1" href="javascript:;">水体EC</a>
                                <ul class="dropdown-menu ec"></ul>
                            </li>
                            <li class="dropdown-submenu" data-stopPropagation="true">
                                <a tabindex="-1" href="javascript:;">枪机</a>
                                <ul class="dropdown-menu qj"></ul>
                            </li>
                            <li class="dropdown-submenu" data-stopPropagation="true">
                                <a tabindex="-1" href="javascript:;">球机</a>
                                <ul class="dropdown-menu uj"></ul>
                            </li>
                        </ul>
                    </div>

                    <!--dropdown end-->
                    <div class="hsty_data">
                        <div class="dropdown">
                            <a  data-toggle="dropdown" class="btn btn-default">
                                --- 查看历史记录 ---<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu multi-level totalTime"></ul>
                        </div><!--dropdown end-->
                        <div class="clr-b"></div>
                    </div><!--hsty_data end-->
                    <div class="clr-b"></div>
                </div>
                <!--tbar end-->
                <div class="cnt_pd">
                    <div class="dt_menu">
                        <ul class="list-group">
                            <li class="list-group-item frt_tit"><h2 class="tit">传感器组${index}号</h2></li>
                            <li class="list-group-item" type="1" style="cursor:pointer;"><a>空气温湿度传感器</a></li>
                            <li class="list-group-item" type="2" style="cursor:pointer;"><a>CO2传感器</a></li>
                            <li class="list-group-item" type="3" style="cursor:pointer;"><a>光照传感器</a></li>
                        </ul>
                    </div><!--dt_menu end-->
                    <div class="dt_shw">
                        <div class="dt_hdr nowValue">
                            <span class="dt_date">更新日期：
                                <span class="time"></span>
                            </span>
                        </div><!--dt_hdr end-->
                        <div class="data_curve" style="position: relative;">
                        </div><!--data_curve end-->
                    </div><!--dt_shw end-->
                </div>
                <!--cnt_pd end-->
            </div>
            <!--cls end-->
        </div>
    </div>
    <!--pgc end-->
    <footer class="ftr">Copyright<span class="cpy">&copy;</span>2017 上海上药神象健康药业有限公司</footer>
</div>
<!--wrp end-->
<script type="text/javascript" src="${basePath}/pc/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/pc/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${basePath}/common/js/common.js"></script>
<script type="text/javascript" src="${basePath}/common/js/ajax.js"></script>
<script type="text/javascript" src="${basePath}/common/js/form.js"></script>
<script type="text/javascript" src="${basePath}/common/js/date.js"></script>
<script type="text/javascript" src="${basePath}/pc/js/custom.js"></script>
<script type="text/javascript" src="${basePath}/pc/baidu/echarts.min.js"></script>
<script type="text/javascript" src="${basePath}/pc/js/option.js"></script>
<script type="text/javascript">
    function loadData(url,historyUrl) {
        AsyncGet(url,{id:"${id}"},function(value){
            for(var i=0;i<value.data.length;i++){
                if(document.getElementById('chart'+(i+1))==null){
                    var div=$('<div style="display: inline-block;"></div>');
                    var icon=$('<img align="absmiddle" style="display: inline-block;">');
                    icon.attr("src","${basePath}/function/getSensorImage?path="+value.data[i].icon);
                    var span=$('<span>'+value.data[i].value+value.data[i].unit+'</span>');
                    div.append(icon).append(span);

                    var date=new Date(value.data[i].time);
                    $(".nowValue .time").text(date.Format("yyyy-MM-dd hh:mm:ss"));

                    $(".nowValue").append(div);

                    var span=$('<span style="display: inline-block;transform:translateY(10px)">');
                    var avg=$('<span class="avg">'+value.data[i].alias+'平均值:</span>');
                    var num=$('<span class="num"></span>');
                    var danWei=$('<span class="danwei">'+value.data[i].unit+'</span>');
                    span.append(avg).append(num).append(danWei);
                    var chartDiv=$('<div  id="chart'+(i+1)+'" style="width: 100%;height: 200px;"></div>');
                    $(".data_curve").append(span).append(chartDiv);
                }else{
                    $(".nowValue div span:eq("+i+")").text(value.data[i].value+value.data[i].unit);
                    var date=new Date(value.data[i].time);
                    $(".nowValue .time").text(date.Format("yyyy-MM-dd hh:mm:ss"));
                }
                var param={id:"${id}",totalTime:$(".totalTime li.active").attr("time"),bh:(i+1)};
                loadHistoryData(historyUrl,param,value.data[i].name,value.data[i].unit);
            }
        });
    }

    function loadHistoryData(url,param,name,danWei) {
        url=url+"/"+param.bh;
        AsyncGet(url, param, function (value) {
            var xList = [];
            var yList = [];
            $.each(value.data, function (index, val) {
                xList.push(val.time);
                yList.push(val.value);
            });
            $("#chart" + param.bh).prev().find("span:eq(1)").text((getSum(yList) / yList.length).toFixed(4));
            var chart = echarts.init(document.getElementById("chart" + param.bh));
            chart.setOption(getOption(xList, yList, name, danWei));
        });
    }

    function change(type) {
        $(".dt_menu ul li[type='"+type+"']").addClass("crt").siblings().removeClass("crt");
        if(type==1){
            loadData("${basePath}/pc/sensor/thSn","${basePath}/pc/sensor/history/thSn");
        }else if(type==2){
            loadData("${basePath}/pc/sensor/co2Sn","${basePath}/pc/sensor/history/co2Sn");
        }else{
            loadData("${basePath}/pc/sensor/lightSn","${basePath}/pc/sensor/history/lightSn");
        }
    }

    $(function () {
        SyncGet("${basePath}/pc/user/getUserRole", null, function (value) {
            $(".username").text(value.data.username);
            if (value.data.userType == 3) {
                $(".totalTime").append('<li style="cursor:pointer;" time="1" class="active"><a>一天数据</a></li>');
                $(".totalTime").append('<li style="cursor:pointer;" time="7"><a>一周数据</a></li>');
                $(".totalTime").append('<li style="cursor:pointer;" time="30"><a>一月数据</a></li>');
            }else if (value.data.userType == 2) {
                $(".totalTime").append('<li style="cursor:pointer;" time="1" class="active"><a>一天数据</a></li>');
                $(".totalTime").append('<li style="cursor:pointer;" time="7"><a>一周数据</a></li>');
            }else{
                $(".totalTime").append('<li style="cursor:pointer;" time="1" class="active"><a>一天数据</a></li>');
            }
        })

        change(${type});
        $(".totalTime").on("click","li",function () {
            if(!$(this).hasClass("active")){
                $(this).addClass("active").siblings().removeClass("active");
                change($(".dt_menu ul li.crt").attr("type"));
            }
        })
        $(".dt_menu ul li:gt(0)").click(function(){
            if(!$(this).hasClass("crt")){
                $(".nowValue div").remove();
                $(".data_curve").empty();
                $(".nowValue .time").text("");
                change($(this).attr("type"));
            }
        })

        function loadUser(url,indexName,redirect,ul) {
            AsyncGet(url,null,function (value) {
                for(var i=0;i<value.data.length;i++){
                    var index=value.data[i][indexName];
                    var id=value.data[i].id;
                    var li=$("<li></li>");
                    var a=$("<a></a>");
                    a.text(index+"号");
                    a.attr("href",redirect+"?index="+index+"&id="+id);
                    li.append(a);
                    ul.append(li);
                }
            })
        }
        loadUser("${basePath}/pc/sensor/getUserSensorGroupList","sensorGroupIndex",
            "${basePath}/function/pc/sensor",$(".dropdown-menu.sensorGroup"));
        loadUser("${basePath}/pc/sensor/getUserECList","sensorGroupIndex",
            "${basePath}/function/pc/ec",$(".dropdown-menu.ec"));
        loadUser("${basePath}/pc/monitor/getUserQjMonitorList","probeIndex",
            "${basePath}/function/pc/monitor",$(".dropdown-menu.qj"));
        loadUser("${basePath}/pc/monitor/getUserUjMonitorList","probeIndex",
            "${basePath}/function/pc/monitor",$(".dropdown-menu.uj"));
    })
</script>
</body>
</html>